<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>blog detail</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/blog.cmn.css">
</head>
<body>
<div id="blogheader"></div>
<article>
    <div id="blogaside"></div>
    <main class="infosbox">
        <div class="newsview">
            <h3 class="news_title"><span v-html="vo.title"></span></h3>
            <div class="bloginfo">
                <ul>
                    <li class="author">作者：{{vo.author}}</li>
                    <li class="timer">时间：{{vo.date}}</li>
                    <li class="view">{{vo.star}}人已阅读</li>
                </ul>
            </div>
            <div class="tags"><a href="#">技术博客</a>&nbsp;<a href="#">{{vo.label}}</a></div>
            <div class="news_about"><strong>简介</strong>内容可能很长，需要花费几分钟阅读</div>
            <div class="news_con">
                <span v-html="vo.content"></span>
            </div>
        </div>
        <div class="share">
            <p class="diggit"><a href="javascript:void(0)" onclick="dodiggit()">很赞哦！</a>(<b id="diggnum">{{vo.star}}</b>)
            </p>
        </div>
        <div class="nextinfo">
            <p v-if="prevnext.data.prev!=null">上一篇：<a v-bind:href="'detail.html?type=100&id='+prevnext.data.prev.id"
                                                      target="_blank">{{prevnext.data.prev.title}}</a></p>
            <p v-if="prevnext.data.next!=null">下一篇：<a v-bind:href="'detail.html?type=100&id='+prevnext.data.next.id"
                                                      target="_blank">{{prevnext.data.next.title}}</a></p>
        </div>
        <div class="news_pl">
            <h2>文章评论</h2>
            <ul>
                <div class="gbko"></div>
            </ul>
        </div>
    </main>
</article>
<div id="blogfooter"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hc-sticky.js"></script>
<script type="text/javascript" src="js/blog.cmn.js"></script>
<script type="text/javascript" src="js/countUp.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
    $("#blogheader").load("public/header.html");
    $("#blogaside").load("public/aside.html");
    $("#blogfooter").load("public/footer.html", function () {
        setTimeout(function () {
            var sc = document.createElement("script");
            sc.src = "js/blog.cmn.js";
            $("body").append(sc);
        }, 300)
    });

    var _detail = new Vue({
        el: 'main.infosbox',
        data: {
            vo: '',
            prevnext: ''
        },
        created: function () {
            this.getDetail();
        },
        methods: {
            getDetail: function () {
                var _id = getUrlParam('id');
                $.ajax({
                    url: 'blog/select?id=' + _id,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        console.log(data);
                        _detail.vo = data;
                        document.title = data.title;
                    }
                });
                $.ajax({
                    url: 'blogs/prevnext?id=' + _id,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        console.log(data.data.next);
                        _detail.prevnext = data;
                    }
                });
            }
        }
    });

    function dodiggit() {
        var num = $('#diggnum').html();
        console.log(num);
        //ajax请求
        $('#diggnum').html(parseInt(num) + 1);
    };
</script>
</body>
</html>